<!--
 * @Descripttion: 
 * @version: 
 * @@Company: DCIT-SH
 * @Author: 王富银
 * @Date: 2024-08-08 23:01:02
 * @LastEditors: Sunny Chen
 * @LastEditTime: 2024-08-09 17:43:23
-->

<template>
  <div class="car-list">
    <div class="title">车辆列表</div>
    <div class="content">
      <el-table
        :data="data"
        border
        style="width: 100%"
        @row-click="handleRowClick"
      >
        <el-table-column
          prop="id"
          label="车辆编号"
          align="center"
          width="150"
        />
        <el-table-column prop="state" label="状态" align="center" />
        <el-table-column prop="power" label="电量" align="center" />
        <el-table-column
          prop="mileage"
          label="总里程(km)"
          align="center"
          width="100"
        />
        <el-table-column
          prop="count"
          label="骑行次数"
          align="center"
          width="100"
        />
        <el-table-column
          prop="investDate"
          label="投放时间"
          align="center"
          width="200"
        />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <div class="delete" @click.stop="del(scope.row)">删除</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="count"
      :default-page-size="limit"
      @prev-click="updateValue"
      @next-click="updateValue"
      @current-change="updateValue"
    >
    </el-pagination>
  </div>
  <div class="search-car" ref="searchCar">
    <el-card style="min-width: 300px">
      <template #header>
        <div class="card-header">
          <span>车辆查询</span>
          <el-button type="primary" :icon="Search" size="small" @click="search"
            >搜索</el-button
          >
        </div>
      </template>
      <div class="search-opt">
        <div style="display: flex; justify-content: space-between">
          <span>请输入车辆的编号</span>
          <el-input
            v-model="carId"
            style="width: 200px"
            placeholder="车辆编号"
          />
        </div>
        <div style="display: flex; justify-content: space-between">
          <span>请选择车辆的状态</span>
          <el-select v-model="state" style="width: 200px">
            <el-option
              v-for="item in stateOpts"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div style="display: flex; justify-content: space-between">
          <span>停放是否违规</span>
          <el-select v-model="isViolation" style="width: 200px">
            <el-option
              v-for="item in violationOpt"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { getCars, getCarNum, deleteCarById, updateCarNum } from "@/api/api";
import { useMapStore } from "@/stores";
import { Search } from "@element-plus/icons-vue";
import { carIsInPolygon } from "@/utils";
const mapStroe = useMapStore();
const map = mapStroe.Map;
const markers = mapStroe.Marker;
const count = ref(0);
const data = ref([]);
const limit = 5;
let currentPage = 1;
const searchCar = ref(null);
const carId = ref("");
const stateOpts = [
  {
    value: "全部车辆",
    label: "全部车辆",
  },
  {
    value: "正常",
    label: "正常",
  },
  {
    value: "故障",
    label: "故障",
  },
];
const state = ref(stateOpts[0].value);
let checkRes;
let isCheck = false;
//是否违规
const violationOpt = [
  {
    value: "全部车辆",
    label: "全部车辆",
  },
  {
    value: "是",
    label: "是",
  },
  {
    value: "否",
    label: "否",
  },
];
const isViolation = ref(violationOpt[0].value);
onMounted(async () => {
  count.value = (await getCarNum())[0].num;
  const cars = await getCars({ _page: currentPage, _limit: limit });
  data.value = cars;
  searchCar.value.style.top = window.innerHeight * 0.07 + "px";
});
//当前的页数
const updateValue = async (e) => {
  currentPage = e;
  if (carId.value) {
    if (!isCheck) {
      data.value = await getCars({
        id_like: carId.value,
        _page: currentPage,
        _limit: limit,
      });
    } else {
      let endIndex = currentPage * limit;
      if (endIndex > checkRes.length) endIndex = checkRes.length;
      data.value = checkRes.slice((currentPage - 1) * limit, endIndex);
    }
  } else {
    data.value = await getCars({ _page: currentPage, _limit: limit });
  }
};

//点击某一行触发的事件
const handleRowClick = (e) => {
  const coordinates = e.coordinates;
  map.flyTo({
    center: coordinates,
    duration: 1000,
    speed: 0.5,
    pitch: 45,
  });
};

//传出某一行
const del = async (row) => {
  const id = row.id;
  const delres = await deleteCarById(id);
  //将car的数量进行更新
  let carnum = (await getCarNum())[0].num;
  carnum--;
  updateCarNum(carnum);
  //重更新更新表格中的数据
  data.value = await getCars({ _page: currentPage, _limit: limit });
  //同时将map上对应的marker 移除
  const targetIndex = markers.findIndex((obj) => {
    return (obj.key = id);
  });
  //移除对应的marker
  if (targetIndex == -1) {
    return;
  }
  const markerObj = markers[targetIndex];
  markerObj.value.remove();
  markers.splice(targetIndex, 1);
  count.value = (await getCarNum())[0].num;
};

//搜索
const search = async () => {
  //根据id和状态进项查询
  let dataSearch;
  if (state.value == "全部车辆") {
    dataSearch = await getCars({ id_like: carId.value });
  } else {
    dataSearch = await getCars({ id_like: carId.value, state: state.value });
  }
  if (dataSearch.length) {
    currentPage = 1;
    if (isViolation.value == "全部车辆") {
      //请求数据的条数
      isCheck = false;
      count.value = dataSearch.length;
      data.value = await getCars({
        _page: currentPage,
        _limit: limit,
        id_like: carId.value,
      });
      return;
    } else if (isViolation.value == "是") {
      //停放违规的数据
      checkRes = await carIsInPolygon(dataSearch, true);
    } else {
      //停放不违规的数据
      checkRes = await carIsInPolygon(dataSearch, false);
    }
    count.value = checkRes.length;
    isCheck = true;
    let endIndex = currentPage * limit;
    if (endIndex > checkRes.length) endIndex = checkRes.length;
    data.value = checkRes.slice((currentPage - 1) * limit, endIndex);
  }
};
</script>
<style scoped>
.car-list {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: white;
  z-index: 10;
}
.car-list .title {
  font-size: 17px;
  font-weight: 600;
  margin: 0 20px;
  margin-top: 10px;
}
.car-list .content {
  margin: 10px 0px;
}
.car-list .delete {
  font-size: 12px;
  color: #409eff;
}
.car-list .delete:hover {
  cursor: pointer;
}
.search-car {
  position: absolute;
  right: 40px;
  z-index: 10;
}
.search-car .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-car .search-opt {
  margin-top: 20px;
}
.search-car .search-opt div {
  margin-bottom: 10px;
  gap: 20px;
}
.search-car .search-opt div span {
  vertical-align: baseline;
  font-size: 14px;
}
</style>
